import '../../Page/CommonMenu.scss'

import { Button, App } from 'antd'
import { useState } from 'react'
import { useEventEmitter, useMount, useUpdateEffect } from 'ahooks'

import { refreshStore } from '../../Config/zustand'
import { DevextremeTemplate } from '../../Utils/Devextreme'
import { PageTopOptions, PagePagination } from '../../Utils/PageAssembly'
import { getMenuConfig, emitFunction, menuRefresh, getInitData } from '../../Utils/TableConfig'
import { useRequest } from 'alova/client'
import { Http } from '../../Utils/Api'
import { useEffect } from 'react'


const ColumnOptions = ({ data, fields }) => [
]

const pageConfig = { url: 'getUserUuidByProjectUuid', page: 'TwoUserList' }

const EnterpriseList = ({ init, Off }) => {
    const { notification } = App.useApp()
    const DevEvent = useEventEmitter()
    const { refresh } = refreshStore()
    const [total, setTotal] = useState(0)
    const [Pagina, setPagina] = useState({ projectUuid: init.uuid, pageIndex: 1, pageSize: 10000 })
    const [Config, setConfig] = useState()
    const [dataSource, setDataSource] = useState()
    const [sortData, setSortData] = useState({})
    const [searchData, setSearchData] = useState({})
    const [selectRowkeys, setSelectRowkeys] = useState()

    const { send } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    const refreshData = async (paging) => getInitData({ url: pageConfig.url, paging, setTotal, setDataSource })
    useUpdateEffect(() => { menuRefresh({ Pagina, setTotal, setDataSource, setPagina, refreshData }) }, [refresh])
    DevEvent.useSubscription(val => emitFunction({ val, Pagina, sortData, searchData, setSortData, setSearchData, setPagina, refreshData }))

    useMount(() => {
        getMenuConfig({ config: pageConfig.page, setPagina, setConfig })
        getInitData({ url: pageConfig.url, paging: Pagina, setTotal, setDataSource })
    })

    useEffect(() => {
        if (dataSource) setSelectRowkeys(dataSource.filter(v => v.isSelect === '已选').map(({ uuid }) => uuid))

    }, [dataSource])


    DevEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'onSelectionChanged') setSelectRowkeys(data)
    })

    const onSubmit = () => {
        if (selectRowkeys.length === 0) {
            notification.info({ key: 'fromModify', message: '操作提醒!', description: '请先选择人员!' })
            return false
        }
        const params = selectRowkeys.map(key => ({ ManageProjectUuid: init.uuid, userUuid: key }))
        send({ url: 'posUsersAddUserManageProject', params }).then(res => {
            notification.success({ key: 'fromModify', message: res.message, description: '人员添加完成' })
            Off()
        })
    }

    return (
        <div className='CommonMenu EnterpriseList'>
            <div className='Right'>
                {Config && dataSource && selectRowkeys &&
                    <>
                        <div className='Table'>
                            <DevextremeTemplate
                                dataSource={dataSource}
                                config={Config}
                                DevEvent={DevEvent}
                                ColumnOptions={ColumnOptions}
                                selectRowkeys={selectRowkeys}
                            />
                            <PagePagination total={total} Paging={Pagina} DevEvent={DevEvent} />
                        </div>
                    </>
                }
            </div>
            <div className='Submit'>
                <Button type='primary' size='large' onClick={onSubmit}>保存</Button>
            </div>
        </div>
    )
}

export default EnterpriseList;